<template>
  <div>
    <def-layout type="col0-24" :page="page" @invoke="invoke">
      <div slot="search" class="form-items">
        <el-form-item>
          <el-input v-model="formSearch.keyword" placeholder="姓名" />
        </el-form-item>
        <!-- <el-form-item>
          <el-input v-model="formSearch.phone" placeholder="手机号码" />
        </el-form-item> -->
        <el-form-item>
          <el-input v-model="formSearch.drivingLicenceNo" placeholder="驾驶证号" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.used" placeholder="请选择启用状态">
            <el-option
              v-for="item in constants.generalUsed.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.isBind" placeholder="请选绑定状态">
            <el-option
              v-for="item in constants.isBind.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div slot="content" class="grid">
        <page-grid v-if="self!=null" :parent="self">
          <div slot="columns">
            <el-table-column prop="used" align="center" label="启用状态" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.used" type="used" @click="filter" />
              </template>
            </el-table-column>
            <el-table-column prop="isBind" align="center" label="绑定状态" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.isBind" type="isBind" @click="filter" />
              </template>
            </el-table-column>
            <el-table-column prop="realName" align="center" label="真实姓名" width="100" />
            <el-table-column prop="drivingLicenceNo" align="center" label="驾驶证号" width="150" />
            <el-table-column prop="shiroUser.phone" align="center" label="手机号码" width="100" />
            <el-table-column prop="carNo" align="center" label="绑定车辆" width="100" />
            <el-table-column prop="remark" align="center" label="备注" width="150" />
            <el-table-column prop="createTime" sortable align="center" label="创建时间" width="150" />
            <el-table-column prop="updateTime" sortable align="center" label="更新时间" width="150" />
          </div>
        </page-grid>
      </div>
    </def-layout>

    <bindCar ref="bindCar" @bindQuery="bindQuery" />
  </div>
</template>
<script>
import adminSupport from 'lola-admin-support-el'
import bindCar from './bindCar.vue'

export default {
  name: 'Personnel',
  components: { bindCar },
  mixins: [adminSupport.mixins.index],
  data() {
    return {
      name: 'Personnel',
      formSearch: { keyword: '', used: '' },
      self: null
    }
  },
  created() {
    this.init() // 页面自定义初始化
  },
  methods: {
    init() {
      var that = this
      that.loadData() // 加载数据(按钮+列表) 扩展需重写该方法
      this.self = that
    },
    search() {
      const queryList = []
      if (!String.isNullOrEmpty(this.formSearch.keyword)) {
        queryList.push({
          key: 'realName',
          value: this.formSearch.keyword,
          oper: ':',
          join: 'and'
        })
      }
      if (!String.isNullOrEmpty(this.formSearch.phone)) {
        queryList.push({
          key: 'o.phone',
          value: this.formSearch.phone,
          oper: ':',
          join: 'and'
        })
      }
      if (!String.isNullOrEmpty(this.formSearch.drivingLicenceNo)) {
        queryList.push({
          key: 'drivingLicenceNo',
          value: this.formSearch.drivingLicenceNo,
          oper: ':',
          join: 'and'
        })
      }
      if (
        !String.isNullOrEmpty(this.formSearch.used) &&
        this.formSearch.used !== 'All'
      ) {
        queryList.push({
          key: 'o.used',
          value: this.formSearch.used,
          oper: '=',
          join: 'and'
        })
      }
      if (
        !String.isNullOrEmpty(this.formSearch.isBind) &&
        this.formSearch.isBind !== 'All'
      ) {
        queryList.push({
          key: 'o.isBind',
          value: this.formSearch.isBind,
          oper: '=',
          join: 'and'
        })
      }

      this.dataGrid.params.queryList = queryList
      this.refresh()
    },
    bindSearch() {
      this.formSearch = { keyword: '', locked: '' }
    },
    unbindCar(row) {
      const that = this
      that
        .$confirm(
          '请确认是否对驾驶员【' + row.realName + '】进行解绑车辆操作?',
          '系统提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        .then(() => {
          const url =
            that.service.conf.api.get('wms').url +
            '/api/logistics/driver/unBind'
          that.service
            .post(url, { carId: row.carId, driverId: row.id })
            .then(function(rsp) {
              if (rsp.code !== 200) {
                that.$message.error(rsp.message)
                return
              }
              that.$message.success('操作成功!')
              that.search()
            })
            .catch(function(err) {
              that.$message.error('服务端异常')
              console.log(err)
            })
        })
        .catch(() => {
          // 取消
        })
    },
    // 绑定车辆
    bindCar(row) {
      console.log(row)
      this.$refs['bindCar'].bind(row)
    },
    // 监听子组件绑定事件
    bindQuery(val) {
      // console.log(val)
      this.search()
    },
    // 重写按钮方法
    buildOtherBtn(item, btn) {
      switch (item.code) {
        case 'm5127':
          btn.type = 'info'
          btn.opt = 'unbindCar'
          break
        case 'm5128':
          btn.type = 'warning'
          btn.opt = 'bindCar'
          break
      }
    }
  }
}
</script>
